<template>
	<view class="container">
		<view class="header boxS">
			<view class="h-head">
				<view :class="hactive" @click="clickOrder(0)">买车订单</view>
				<view :class="tactive" @click="clickOrder(1)">卖车订单</view>
				<view class="xians" :style="{left: hleft + 'rpx'}"></view>
			</view>
			<!-- 买车 -->
			<view class="h-two" v-show="hactive">
				<view class="h-two-item" @click="selectItem(true,0)" :class="activeNum == 0 ? 'active' : ''">
					<view class="h-num">{{orderNum.total}}</view>
					<view class="h-text">全部</view>
				</view>
				<view class="h-two-item" @click="selectItem(true,3)" :class="activeNum == 3 ? 'active' : ''">
					<view class="h-num">{{orderNum.trading}}</view>
					<view class="h-text">交易中</view>
				</view>
				<view class="h-two-item" @click="selectItem(true,6)" :class="activeNum == 6 ? 'active' : ''">
					<view class="h-num">{{orderNum.aftersale}}</view>
					<view class="h-text">退款/售后</view>
				</view>
			</view>
			<!-- 卖车 -->
			<view class="h-two" v-show="tactive">
				<view class="h-two-item" @click="selectItem(false,0)" :class="activeNum2 == 0 ? 'active' : ''">
					<view class="h-num">{{orderNum.total}}</view>
					<view class="h-text">全部</view>
				</view>
				<view class="h-two-item" @click="selectItem(false,2)" :class="activeNum2 == 2 ? 'active' : ''">
					<view class="h-num">{{orderNum.WaitConfirm}}</view>
					<view class="h-text">待接单</view>
				</view>
				<view class="h-two-item" @click="selectItem(false,3)" :class="activeNum2 == 3 ? 'active' : ''">
					<view class="h-num">{{orderNum.trading}}</view>
					<view class="h-text">交易中</view>
				</view>
				<view class="h-two-item" @click="selectItem(false,6)" :class="activeNum2 == 6 ? 'active' : ''">
					<view class="h-num">{{orderNum.aftersale}}</view>
					<view class="h-text">退款/售后</view>
				</view>
			</view>
		</view>

		<!-- 买车订单 -->
		<scroll-view scroll-y="true" @scrolltolower="topRefresh" style="height: 100%;width: 100%;" v-show="hactive">
			<view v-show="!orderList.length" class="moren">
				<image :src="Core.globalImgUrlBussiness+'/carSourceOrder/1@2x.png'"></image>
			</view>
			<view class="midle boxS" v-for="item in orderList" :key="item.contractid">
				<view class="m-header" @click="goDetail(item.contractid)">
					<view class="m-h-left">
						<image :src="Core.globalImgUrlBussiness+'/carSourceOrder/che@2x.png'"></image>
						<view class="m-h-name">
							<view class="text-line" style="margin-bottom: 10rpx;">{{item.storename}}</view>
							<view class="text-line" style="margin-top: 10rpx;color:rgba(102,102,102,1);font-size: 26rpx;">{{item.companyname}}</view>
						</view>
					</view>
					<view class="m-h-right">{{orderStatePage1[item.contractstatus].text}}</view>
				</view>
				<view class="m-detail" @click="goDetail(item.contractid)">
					<view class="m-d-left">
						<image :src="item.carimg"></image>
					</view>
					<view class="m-d-right">
						<view class="m-d-name">{{item.cartypename}}{{item.carname}}</view>
						<view class="m-d-color">
							<view>外观/内饰：</view>
							<view class="color1">
								<view class="color11" :style="{background: item.carcolour.outerimg.color,marginright: '10rpx'}"></view>
								<view>{{item.carcolour.outerimg.title}}</view>/
								<view>{{item.carcolour.inimg.title}}</view>
								<view class="color11" v-show="item.carcolour.inimg.color.length==1" :style="{background: item.carcolour.inimg.color[0],marginleft: '10rpx'}"></view>
								<view class="color11" style="margin-left: 10rpx;" v-show="item.carcolour.inimg.color.length==2">
									<view class="color111" style="border-radius: 6rpx 6rpx 0 0;" :style="{background: item.carcolour.inimg.color[0]}"></view>
									<view class="color111" style="border-radius: 0 0 6rpx 6rpx;" :style="{background: item.carcolour.inimg.color[1]}"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="m-order-d" @click="goDetail(item.contractid)">
					<view class="m-o-top">
						下单时间：<text>{{item.addtime}}</text>
					</view>
					<view class="m-o-bottom">
						<view>
							车辆售价：<text style="color: #333333;font-weight: bold;font-size: 32rpx;">￥{{item.vehicleprice}}万</text><text style="margin-left: 30rpx;">X1</text>
						</view>
						<view>定金：<text style="color: #333333;font-weight: bold;font-size: 32rpx;">￥{{item.deposit}}</text></view>
					</view>
				</view>
				<view class="m-btn">
					<view class="m-b-left">
						<image @click="dPhone(item.storemobile)" :src="Core.globalImgUrlBussiness+'/carSourceOrder/dianhua@2x.png'"></image>
						<image @click="dPhone('4000909987')" :src="Core.globalImgUrlBussiness+'/carSourceOrder/kefu@2x.png'"></image>
						<image @click="xiaoxi" :src="Core.globalImgUrlBussiness+'/carSourceOrder/xiaoxi@2x.png'" v-show="orderStatePage1[1].state==3"></image>
					</view>
					<view class="m-b-right">
						<view class="btn-r" style="margin-left: 10rpx;" v-for="(items, i) in orderStatePage1[item.contractstatus].btn" :key="i"
						 @click.stop="clickBtn(items,item.contractid)">{{items}}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 卖车订单 -->
		<scroll-view scroll-y="true" @scrolltolower="topRefreshSell" style="height: 100%;width: 100%;" v-show="!hactive">
			<view v-show="!orderLists.length" class="moren">
				<image :src="Core.globalImgUrlBussiness+'/carSourceOrder/1@2x.png'"></image>
			</view>
			<view class="midle boxS" v-for="item in orderLists" :key="item.contractid">
				<view class="m-header" @click="goDetails(item.contractid)">
					<view class="m-h-left">
						<image :src="Core.globalImgUrlBussiness+'/carSourceOrder/che@2x.png'"></image>
						<view class="m-h-name">
							<view class="text-line" style="margin-bottom: 10rpx;">{{item.storename}}</view>
							<view class="text-line" style="margin-top: 10rpx;color:rgba(102,102,102,1);font-size: 26rpx;">{{item.companyname}}</view>
						</view>
					</view>
					<view class="m-h-right">{{orderStatePage2[item.contractstatus].text}}</view>
				</view>
				<view class="m-detail" @click="goDetails(item.contractid)">
					<view class="m-d-left">
						<image :src="item.carimg"></image>
					</view>
					<view class="m-d-right">
						<view class="m-d-name">{{item.cartypename}}{{item.carname}}</view>
						<view class="m-d-color">
							<view>外观/内饰：</view>
							<view class="color1">
								<view class="color11" :style="{background: item.carcolour.outerimg.color,marginright: '10rpx'}"></view>
								<view>{{item.carcolour.outerimg.title}}</view>/
								<view>{{item.carcolour.inimg.title}}</view>
								<view class="color11" v-show="item.carcolour.inimg.color.length==1" :style="{background: item.carcolour.inimg.color[0],marginleft: '10rpx'}"></view>
								<view class="color11" style="margin-left: 10rpx;" v-show="item.carcolour.inimg.color.length==2">
									<view class="color111" style="border-radius: 6rpx 6rpx 0 0;" :style="{background: item.carcolour.inimg.color[0]}"></view>
									<view class="color111" style="border-radius: 0 0 6rpx 6rpx;" :style="{background: item.carcolour.inimg.color[1]}"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="m-order-d" @click="goDetails(item.contractid)">
					<view class="m-o-top">
						下单时间：<text>{{item.addtime}}</text>
					</view>
					<view class="m-o-bottom">
						<view>
							车辆售价：<text style="color: #333333;font-weight: bold;font-size: 32rpx;">￥{{item.vehicleprice}}万</text><text style="margin-left: 30rpx;">X1</text>
						</view>
						<view>定金：<text style="color: #333333;font-weight: bold;font-size: 32rpx;">￥{{item.deposit}}</text></view>
					</view>
				</view>
				<view class="m-btn">
					<view class="m-b-left">
						<image @click="dPhone(item.buyermobile)" :src="Core.globalImgUrlBussiness+'/carSourceOrder/dianhua@2x.png'"></image>
						<image @click="dPhone('4000909987')" :src="Core.globalImgUrlBussiness+'/carSourceOrder/kefu@2x.png'"></image>
						<image @click="xiaoxi" :src="Core.globalImgUrlBussiness+'/carSourceOrder/xiaoxi@2x.png'" v-show="orderStatePage1[1].state==3"></image>
					</view>
					<view class="m-b-right">
						<view class="btn-r" style="margin-left: 10rpx;" v-for="(items, i) in orderStatePage2[item.contractstatus].btn" :key="i" @click.stop="clickBtn2(items,item.contractid)">{{items}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 取消交易弹窗 -->
		<u-modal v-model="bframe2" :mask-close-able="true" :show-confirm-button="false" :show-title="false">
			<view class="slot-content">
				<view class="mo-title">确认退款</view>
				<view class="mo-content">确认退款后，此笔订单将取消交 易，定金会退还至买家原支付账 户，是否确定取消?</view>
				<view class="mo-btn">
					<image @click="bframe=false" :src="Core.globalImgUrlBussiness+'/carSourceOrder/wozai@2x.png'"></image>
					<image @tap="agreeCancel()" :src="Core.globalImgUrlBussiness+'/carSourceOrder/quren@2x.png'"></image>
				</view>
			</view>
		</u-modal>
		<u-modal v-model="bframe" :mask-close-able="true" :show-confirm-button="false" :show-title="false">
			<view class="slot-content">
				<view class="mo-title">取消交易</view>
				<view class="mo-content">是否确定取消此笔订单交易？</view>
				<view class="mo-btn">
					<image @click="bframe=false" :src="Core.globalImgUrlBussiness+'/carSourceOrder/wozai@2x.png'"></image>
					<image @tap="cancelTransaction()" :src="Core.globalImgUrlBussiness+'/carSourceOrder/shi@2x.png'"></image>
				</view>
			</view>
		</u-modal>
		<u-popup v-model="jujueShow" mode="bottom" length="33%" border-radius="30">
			<view class="pop-one">
				拒绝取消订单
			</view>
			<textarea class="texta" v-model="texts" placeholder="请输入拒绝订单取消的理由"></textarea>
			<view style="margin: 0 auto;display: flex;justify-content: center;padding: 40rpx 0;">
				<image style="width: 702rpx;height: 88rpx;margin: 0 auto;" @click="refuseCancel()" :src="Core.globalImgUrlBussiness+'/carSourceDetail/ti@2x.png'"></image>
			</view>
		</u-popup>
	</view>
</template>

<script src="./carSourceOrder.js"></script>

<style src="./carSourceOrder.scss" lang="scss" scoped></style>
